Estoy tratando de vincular todos los elementos <a> para tener la función onclick. Y aunque la variable a es a, cuando trato de usar la palabra clave this dentro de onclick , me devuelve el objeto Window . Código:
<!DOCTYPE html> <html lang="pl"> <head> <meta charset='utf-8'> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv='X-UA-Compatible' content='IE=edge'> </head> <body> <div id="stages"> <div><p>Część I</p></div> <div><a data="audio/01-1-1.mp3">Rozdział 1</a><div></div><p>44:10</p></div> <div><a data="audio/02-1-2.mp3">Rozdział 2</a><div></div><p>20:06</p></div> <div><a data="audio/03-1-3.mp3">Rozdział 3</a><div></div><p>19:16</p></div> <div><a data="audio/04-1-4.mp3">Rozdział 4</a><div></div><p>25:29</p></div> <div><a data="audio/05-1-5.mp3">Rozdział 5</a><div></div><p>32:16</p></div> <div><a data="audio/06-1-6.mp3">Rozdział 6</a><div></div><p>13:06</p></div> <div><a data="audio/07-1-7.mp3">Rozdział 7</a><div></div><p>28:38</p></div> <div><a data="audio/08-1-8.mp3">Rozdział 8</a><div></div><p>51:59</p></div> </div> <script> const a = document.querySelector('#stages a') console.log(a) a.onclick = () => { console.log(this); } </script> </body> </html>Para usar this , debe crear una función anónima regular en lugar de una función de flecha.
const anchors = [...document.querySelectorAll("#stages a")]; anchors.forEach(a => { console.log(a); a.onclick = function () { console.log(this); }; });Es normal, ya que está en el cierre de la ventana y usa una función de flecha, si necesita tener acceso a su elemento, puede agregar un accesorio a su función de flecha como este:
const stages = [...document.querySelectorAll("#stages a")]; stages.forEach((a) => a.onclick = (e) => { console.log(e.currentTarget); }); <!DOCTYPE html> <html lang="pl"> <head> <meta charset='utf-8'> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv='X-UA-Compatible' content='IE=edge'> </head> <body> <div id="stages"> <div><p>Część I</p></div> <div><a data="audio/01-1-1.mp3"><strong>Rozdział 1</strong></a><div></div><p>44:10</p></div> <div><a data="audio/02-1-2.mp3">Rozdział 2</a><div></div><p>20:06</p></div> <div><a data="audio/03-1-3.mp3">Rozdział 3</a><div></div><p>19:16</p></div> <div><a data="audio/04-1-4.mp3">Rozdział 4</a><div></div><p>25:29</p></div> <div><a data="audio/05-1-5.mp3">Rozdział 5</a><div></div><p>32:16</p></div> <div><a data="audio/06-1-6.mp3">Rozdział 6</a><div></div><p>13:06</p></div> <div><a data="audio/07-1-7.mp3">Rozdział 7</a><div></div><p>28:38</p></div> <div><a data="audio/08-1-8.mp3">Rozdział 8</a><div></div><p>51:59</p></div> </div> </body> </html>